<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink, RouterView, useRoute } from 'vue-router'

const route = useRoute()
const activeTab = computed(() => route.name)

const routes = [
  {
    path: '/dataSource',
    name: 'dataSource',
  },
  {
    path: '/layout',
    name: 'layout',
  },
  {
    path: '/actions',
    name: 'actions',
  }
]


</script>

<template>
  <RouterLink v-for="route in routes" v-bind:key="route.name" :to="route.name">
    <div class="tab" :style="{backgroundColor: activeTab === route.name ? 'pink' : 'white'}">
      {{ route.name }}
    </div>
  </RouterLink>
  <!-- <RouterLink to="dataSource"><div class="tab"
     :style="{ backgroundColor:activeTab === 'dataSource'? 'pink' : 'white' }">Home</div></RouterLink>
  <RouterLink to="layout"><div class="tab"
     :style="{ backgroundColor:activeTab === 'layout'? 'pink' : 'white' }">layout</div></RouterLink>
  <RouterLink to="actions"><div class="tab"
     :style="{ backgroundColor:activeTab === 'actions'? 'pink' : 'white' }">actions</div></RouterLink> -->

  <RouterView />
</template>
